<?php
	// Posts are found
	if ( $posts->have_posts() ) {
		$n = 1;
		echo '<div class="products-wrapper" id="porridge-list"><div class="row">';
		while ( $posts->have_posts() ) :
			
			$posts->the_post();
			global $post;
			?>
				<?php
					$thumb_id = get_post_thumbnail_id($post -> ID);
					$image_url = wp_get_attachment_url($thumb_id);
					if($n == '2' || $n == '3' || $n == '4'){
						$image_vals = aq_resize($image_url, 370, 555, true);
					} else {
						$image_vals = aq_resize( $image_url, 370, 260, true );
					}
					
					if(!$image_vals){
						$image_vals = aq_resize( PLACEHOLDER, 370, 260, true );
					}

					$n++;
				?>
				<div class="col-xs-12 col-mo-6 col-sm-4 isotope-item">
					<article class="bg<?php if(get_field('background_color')) echo '-'.get_field('background_color'); ?>">

						<div class="img-wrapper">
							<img src="<?php echo $image_vals;?>" />
						</div>
						<div class="type-info <?php echo get_field('font_color'); ?>">
							<h4><?php the_title(); ?></h4>
							<div class="product-content">
								<?php echo get_the_content();?>
							</div>
						</div>
					</article>
				</div>

			<?php
			
		endwhile;
		echo '</div></div>';
	}
	// Posts not found
	else {
		echo '<h4>' . __( '暂无产品', 'shortcodes-ultimate' ) . '</h4>';
	}
?>

<script>
	jQuery(window).load(function () {
		jQuery('#porridge-list').isotope({
			layoutMode: 'packery',
			itemSelector : '.isotope-item'
		});		
	})
</script>